/**
 * @file: 用户管理
 * @author: Lengxx
 * @date: 2024-06-19
 */
<template>
  <PageWrapper title="用户管理">
    <BasicTable @register="tableRegister" >
      <template #toolbar>
        <Button type="primary" @click="onAddUser">新增</Button>
      </template>
      <template #avatar="{ record }">
        <Avatar :src="record.avatar" />
      </template>
      <template #action="{ record }">
        <Button type="link" size="small" @click="onTableEdit(record)">编辑</Button>
        <Button type="link" size="small" @click="onBindRole(record)">关联角色</Button>
        <Button type="link" size="small" @click="onBindStore(record)">绑定门店</Button>
        <Button v-if="record.id != 1" size="small" danger type="link" @click="onTableDelete(record)">删除</Button>
      </template>
    </BasicTable>

    <AddUserModal @register="modalRegister" @submit="onAddUserSubmit" />
    <BindStoreModal @register="storeModalRegister" @submit="onBindRoleSubmit" />
    <BindRoleModal @register="roleModalRegister" @submit="onBindRoleSubmit" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import {} from 'vue'
import * as api from '@/api/user'
import { useRequest } from '@vben/hooks'
import { PageWrapper } from '@/components/Page'
import { BasicTable, useTable } from '@/components/Table'
import { useModal } from '@/components/Modal'
import { tableColumns } from './tableOpts';

import { Button, Avatar } from 'ant-design-vue'
import AddUserModal from './components/AddUserModal.vue'
import BindRoleModal from './components/BindRoleModal.vue'
import BindStoreModal from './components/BindStoreModal.vue'

import { ModalTypeEnum } from '@/enums/appEnum'
import { useMessage } from '@/hooks/web/useMessage'
import { IUserInfo } from '@/api/user/model'

const { loading, data: tableData, runAsync: getUserList } = useRequest(api.getUserList);

const { createMessage } = useMessage();
const [modalRegister, { openModal, closeModal }] = useModal();
const [roleModalRegister, { openModal: openRoleModal, closeModal: closeRoleModal }] = useModal();
const [storeModalRegister, { openModal: openStoreModal }] = useModal();

const [tableRegister] = useTable({
  loading,
  columns: tableColumns,
  dataSource: tableData
})

function onAddUser() {
  openModal(true, { modalType: ModalTypeEnum.Add })
}

function onTableEdit(record: IUserInfo) {
  openModal(true, { modalType: ModalTypeEnum.Edit, record })
}

function onTableDelete(record: IUserInfo) {
  console.log('删除 ', record);
}

function onAddUserSubmit() {
  closeModal();
  getUserList();
}

/** 绑定角色 */
function onBindRole(record: IUserInfo) {
  openRoleModal(true, record);
}

function onBindStore(record: IUserInfo) {
  console.log('绑定门店 ', record);
  openStoreModal(true, record);
}

function onBindRoleSubmit() {
  createMessage.success('绑定成功');
  closeRoleModal();
  getUserList();
}

</script>
